<template>
  <div class="common-layout">
    <el-container>

      <el-header>
          <Header />
        </el-header>
      <el-container>
        <el-aside width="180px">
        <Layout />
      </el-aside>
        <el-main>
          <div class="main flex flex-row">
            <div class="content-box">
              <div class="filter p-4">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                  <el-form-item label="工序名称" align="center">
                    <el-input v-model="formInline.deviceName" readonly />
                  </el-form-item>
                  <el-form-item label="作业方法" align="center">
                    <el-input v-model="formInline.itemName" clearable />
                  </el-form-item>
                  <el-form-item label="编码" align="center">
                    <el-input v-model="formInline.peopleCount" clearable />
                  </el-form-item>
                  <el-form-item label="通用程度" align="center">
                    <el-date-picker v-model="formInline.startDate" type="daterange" unlink-panels range-separator="To"
                      start-placeholder="开始日期" end-placeholder="结束日期" />
                  </el-form-item>
                  <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                  </el-form-item> -->
                </el-form>
              </div>
              <div class="table p-4">
                <div class="box">
                  <el-table :data="tableData" border table-layout="fixed" stripe  style="width: 100%;height: 100%;margin:auto;">
                    <el-table-column prop="deviceName" label="工序名称" />
                    <el-table-column prop="itemName" label="作业方法" />
                    <el-table-column prop="maker" label="编码" />
                    <el-table-column prop="checkState" label="通用程度" />
                    <el-table-column prop="makeTime" label="编辑时间" />
                    <el-table-column fixed="right" label="操作" width="120">
                      <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">
                          查看
                        </el-button>
                        <el-button link type="primary" size="small" @click.prevent="editRow(scope.row)">
                          删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="page">
                  <el-pagination background layout="prev, pager, next" :total="1000" />
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script setup lang="ts">
import { ref } from "vue"
const tableData = ref([
  {
    deviceName: '修磨油压系统油箱',
    itemName:'用2台10T、2台5T倒链将配重块挂设在...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'设备级',
    checkResult:'审核完毕',
  },
  {
    deviceName: '导料槽拆除',
    itemName:'首先进行油缸泄压，用吊机吊住导料槽...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'设备级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '斗轮铲斗拆除',
    itemName:'用倒链将斗轮位置固定后逐个拆除；',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'设备级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '回装斗轮挡料板',
    itemName:'先定好吊点，钢丝绳挂设好之后拆除固定...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'设备级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '配重块挂设',
    itemName:'用2台10T、2台5T倒链将配重块挂设在...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'厂级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'用2台10T、2台5T倒链将配重块挂设在...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'厂级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'用2台10T、2台5T倒链将配重块挂设在...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'厂级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'用2台10T、2台5T倒链将配重块挂设在...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'厂级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
  {
    deviceName: '修磨油压系统油箱',
    itemName:'用2台10T、2台5T倒链将配重块挂设在...',
    maker: 'L001A',
    makeTime: '2024-02-03',
    checkState:'厂级',
    checkTime:'2024-02-04',
    checkResult:'审核完毕',
  },
])
const formInline = reactive({
  deviceName: '',
  itemName: '',
  peopleCount: '',
  startDate: '',
  endDate: ''
})
const optionVisible = ref(false)
const fileTitle = ref('')
// for (let index = 0; index < 15; index++) {
//   const element = {
//     date: '2016-05-03',
//     name: '修磨油压系统油箱修理',
//     address: 'No. 189, Grove St, Los Angeles',
//   }
//   tableData.value.push(element)
// }
const editRow = (row) => {
  console.log(row)
  fileTitle.value = row.name
  optionVisible.value = true
}
const handleNodeClick = () => {

}
const onSubmit = () => {

}
</script>

<style lang="less" scoped>
.common-layout {
  height: 100%;

  .el-container {
    height: 100%;
  }

  .el-header {
    padding: 0;
  }
}

.main {
  height: 100%;

  .left {
    width: 200px;
  }

  .content-box {
    height: 100%;
    flex: 1;
    width: calc(100% - 200px);
    display: flex;
    flex-direction: column;

    .filter {
      height: auto;
      width: 100%;
    }

    .table {
      flex: 1;
      // height: calc(100% - 182px);
      position: relative;
      // height: 0;
      display: flex;
      .page{
        height: 45px;
      }
      .box{
        flex: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        margin: auto;        
      }
    }
  }
}
:deep(.cell){
  text-align: center;
}
</style>
